<template>
  <el-dialog
    width="600px"
    title="添加/编辑"
    :visible.sync="dialogValue"
    :close-on-click-modal="false"
    append-to-body
  >
    <SubmitForm
      :rule-form="ruleForm"
      :rules="rules"
      :form-list="formList"
      @change="handleFormChange"
      @save="onSave"
      @close="dialogValue = false"
    >
      <template #itemList>
        <el-form-item label="排班">
          <div v-for="(item,index) in ruleForm.itemList" style="margin-bottom: 12px;display: flex;align-items: center">
            <el-time-select
                v-model="item.start_time"
                :picker-options="{
                  start: '00:00',
                  step: '00:30',
                  end: '23:30'
                }"
                placeholder="出发时间">
            </el-time-select>
            <el-input pleaceholder="请输入人数" style="margin-left: 20px;width: 220px" type="number" v-model="item.count"></el-input>
            <div style="padding: 0 20px;font-size: 24px;color: #1AAD19;">
              <i class="el-icon el-icon-circle-plus-outline" @click="add" style="cursor:pointer;margin-right: 12px;"></i>
              <i  style="cursor:pointer;" class="el-icon el-icon-remove-outline" v-if="ruleForm.itemList.length > 1" @click="del(index)"></i>
            </div>
          </div>
        </el-form-item>
      </template>
    </SubmitForm>

  </el-dialog>
</template>

<script>
import { http } from '@/api'
import dayjs from "dayjs";
export default {
  name: 'FormAdd',
  data() {
    return {
      apiKey: 'cycle',
      dialogValue: false,
      ruleForm: {
      },
      defaultForm: {
        ship_id: '',
        count: 0,
        start_time: '',
        end_time: '',
        status: -1,
        price: '',
        child_price: '',
        duration: 0,
        itemList: [
          {
            start_time: '',
            end_time: '',
            count: 0
          }
        ]
      },
      rules: {
        count: [{ required: true, message: '不能为空' }],
        ship_id: [{ required: true, message: '不能为空' }],
        start_time: [{ required: true, message: '不能为空' }],
        end_time: [{ required: true, message: '不能为空' }],
        price: [{ required: true, message: '不能为空' }],
        child_price: [{ required: true, message: '不能为空' }],
      },
      formList: [
        {
          key: 'ship_id',
          name: 'select',
          label: '出海项目',
          colSpan: 12,
          options: []
        },
        {
          key: 'duration',
          name: 'input',
          label: '时长',
          colSpan: 12,
        },
        {
          key: 'start_time',
          name: 'datetime',
          label: '开始日期',
          dateType: 'date',
          colSpan: 12
        },
        {
          key: 'end_time',
          name: 'datetime',
          label: '结束日期',
          dateType: 'date',
          colSpan: 12
        },
        {
          key: 'price',
          name: 'input',
          label: '价格',
          colSpan: 12,
          type: 'number',
          min: 0
        },
        {
          key: 'child_price',
          name: 'input',
          label: '儿童价格',
          colSpan: 12,
          type: 'number',
          min: 0
        },
        {
          key: 'itemList',
          slot: true
        },
      ]
    }
  },
  methods: {
    handleFormChange({ key, val }) {
      if (key === 'ship_id') {
        let find = this.formList[0].options.find(item => item.value === val)
        this.ruleForm.itemList.forEach(item => {
          if (!item.count) {
            item.count = find.count
          }
        })
        console.log('find',find)
        this.ruleForm.price = find.price
        this.ruleForm.child_price = find.child_price
        this.ruleForm.duration = find.duration
      }
    },
    add() {
      let item = this.formList[0].options.find(item => item.value === this.ruleForm.ship_id)
      this.ruleForm.itemList.push({
        start_time: '',
        count: item ? item.count : 0,
        end_time: ''
      })
    },
    del(index) {
      this.ruleForm.itemList.splice(index, 1)
    },
    open(row) {
      this.dialogValue = true
      http.ship.list({
        type: 0
      }).then(res => {
        console.log(res)
        this.formList[0].options = res.data.map(item => {
          return {
            name: item.name,
            value: item.id,
            count: item.count,
            ...item
          }
        })
      })
      if (row) {
        http[this.apiKey].read(row.id).then(res => {
          this.ruleForm = {
            ...res.data
          }
        })
      } else {
        this.ruleForm = {
         ...this.defaultForm,
          itemList: [
            {
              start_time: '',
              count: 0,
              end_time: ''
            }
          ]
        }
      }
    },
    onSave() {
      if (this.ruleForm.itemList.some(item => !item.start_time)) {
        this.$message.error('请完善排班')
        return
      }
      let itemList = this.ruleForm.itemList.map(item => {
        return {
          ...item,
          duration: this.ruleForm.duration,
          start_time: dayjs(dayjs(this.ruleForm.start_time).format('YYYY-MM-DD ') + item.start_time).format('YYYY-MM-DD HH:mm:ss'),
          end_time: dayjs(dayjs(this.ruleForm.start_time).format('YYYY-MM-DD ') + item.start_time).add(this.ruleForm.duration, 'hour').format('YYYY-MM-DD HH:mm:ss')
        }
      })
      http[this.apiKey][this.ruleForm.id ? 'update' : 'batchCreate'](this.ruleForm.id, { ...this.ruleForm, itemList }).then(res => {
        this.$message.success('操作成功')
        this.dialogValue = false
        this.$emit('get-page')
      })
    }
  }
}
</script>

<style scoped lang="scss">
</style>
